{extend name="common:frm_base" /}
{block name="content"}
<style>
    .hhf_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .hhf_row_b{display:flex;justify-content:space-between;align-items:center;}
    .num{background:#0080cd;width:40px;height:40px;font-size:34px;color:#fff;margin-right:10px;border-radius:4px;}
    .list{flex-wrap:wrap;}
    .list .row{width:48%;color:#fff;margin-top:30px;cursor:pointer;}
    .list .row .name{background:#0f6ebd;display:flex;align-items:center;border-radius:10px 10px 0 0;}
    .list .row .name .left{margin:5px 10px;}
    .list .row .name .col{font-size:16px;margin:5px 0;}
    .list .row .number{background:#123264;padding:15px 30px;color:#38efff;font-size:30px;font-weight:bold;border-radius:0 0 10px 10px;}
    .site_list .row{color:#fff;}
    .paixing{color:#24cad1;}
    .container div {
        height: 50px;
        text-align:center;
    }
</style>
<div style="background:url(/uploads/data/back.jpg) repeat left center;background-size:100%;min-width:100vw;min-height:100vh;">
    <div style="text-align:center;">
        <img src="/uploads/data/top.png">
    </div>
    <div style="display:flex;justify-content:center;align-items:center;margin-top:20px;">
        <img src="/uploads/data/left.png">
        <span style="color:#fff;margin:0 15px;" id="timeDiv"></span>
        <img src="/uploads/data/right.png">
    </div>
    <div style="display:flex;margin:0 10px;padding-top:20px;">
        <div style="width:33.33%;">
            <div style="background:rgba(0,0,0,0.2);min-height:855px;margin:0 10px;padding:0 15px;">
                <div style="padding-top:15px;">
                    <img height="40" src="/uploads/data/icon01.png">
                </div>
                <div id="chartmain1" style="height:320px;margin-top:30px;"></div>
                <div style="padding-top:15px;">
                    <img height="40" src="/uploads/data/icon04.png">
                </div>
                <div id="chartmain2" style="height:320px;margin-top:30px;"></div>
            </div>
        </div>
        <div style="width:33.33%;">
            <div style="background:rgba(0,0,0,0.2);min-height:825px;margin:0 10px;padding:15px;">
                <div style="display:flex;justify-content:space-between;text-align:center;">
                    <div style="text-align:right;">
                        <div style="color:#fff;margin-top:10px;font-size:16px;">文明实践阵地</div>
                        <div class="container">
                            <div class="scroll-number-0"></div>
                        </div>
                    </div>
                    <div style="text-align:right;">
                        <div style="color:#fff;margin-top:10px;font-size:16px;">文明实践志愿服务队</div>
                        <div class="container">
                            <div class="scroll-number-1"></div>
                        </div>
                    </div>
                    <div style="text-align:right;">
                        <div style="color:#fff;margin-top:10px;font-size:16px;">文明实践志愿者</div>
                        <div class="container">
                            <div class="scroll-number-2"></div>
                        </div>
                    </div>
                </div>
                <div style="padding-top:15px;">
                    <img height="40" src="/uploads/data/icon07.png">
                </div>
                <div class="list hhf_row_b">
                    <div class="row">
                        <div class="name">
                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>
                            <span class="col">累计登录</span>
                        </div>
                        <div class="number count0">{$count[8]}</div>
                    </div>
                    <div class="row">
                        <div class="name">
                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>
                            <span class="col">活动风采</span>
                        </div>
                        <div class="number count1">{$count[9]}</div>
                    </div>
                    <div class="row">
                        <div class="name">
                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>
                            <span class="col">活动场次</span>
                        </div>
                        <div class="number count2">{$count[10]}</div>
                    </div>
                    <div class="row">
                        <div class="name">
                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>
                            <span class="col">新时代讲堂</span>
                        </div>
                        <div class="number count3">{$count[11]}</div>
                    </div>
                </div>
                <div style="padding-top:30px;">
                    <img height="40" src="/uploads/data/icon02.png">
                </div>
                <div id="chartmain" style="height:320px;"></div>
                <!--                <div class="list hhf_row_b">-->
                <!--                    <div class="row" onclick="newTab($(this).attr('data'),'会员数量');" data="{:url('user/index')}">-->
                <!--                        <div class="name">-->
                <!--                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>-->
                <!--                            <span class="col">会员数量</span>-->
                <!--                        </div>-->
                <!--                        <div class="number count4">{$count[4]}</div>-->
                <!--                    </div>-->
                <!--                    <div class="row" onclick="newTab($(this).attr('data'),'资讯数量');" data="{:url('article/index')}">-->
                <!--                        <div class="name">-->
                <!--                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>-->
                <!--                            <span class="col">资讯数量</span>-->
                <!--                        </div>-->
                <!--                        <div data-anim="layui-anim-upbit" class="number count5">{$count[5]}</div>-->
                <!--                    </div>-->
                <!--                    <div class="row" onclick="newTab($(this).attr('data'),'活动数量');" data="{:url('Practice/index')}">-->
                <!--                        <div class="name">-->
                <!--                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>-->
                <!--                            <span class="col">活动数量</span>-->
                <!--                        </div>-->
                <!--                        <div class="number count6">{$count[6]}</div>-->
                <!--                    </div>-->
                <!--                    <div class="row" onclick="newTab($(this).attr('data'),'讲堂数量');" data="{:url('forum/index')}">-->
                <!--                        <div class="name">-->
                <!--                            <span class="left" style="width:2px;background:#26d1d4;height:14px;"></span>-->
                <!--                            <span class="col">讲堂数量</span>-->
                <!--                        </div>-->
                <!--                        <div class="number count7">{$count[7]}</div>-->
                <!--                    </div>-->
                <!--                </div>-->
            </div>
        </div>
        <div style="width:33.33%;">
            <div style="background:rgba(0,0,0,0.2);min-height:770px;margin:0 10px;padding:0 15px;">
                <div style="padding-top:15px;">
                    <img height="40" src="/uploads/data/icon06.png">
                </div>
                <div style="padding:30px;color:#fff;display:flex;justify-content:space-between;">
                    <span style="cursor:pointer;" onclick="clickType(this,1);" class="paixing site1">文明实践所</span>
                    <span style="cursor:pointer;" onclick="clickType(this,2);" class="site2">文明实践站点</span>
                    <span style="cursor:pointer;" onclick="clickType(this,3);" class="site3">志愿服务队</span>
                </div>
                <iframe id="site" style="width:100%;background:rgba(0,0,0,0);border:none;height:715px;" src="/admin/test/site1/type/1"></iframe>
            </div>
        </div>
    </div>
</div>
<div style="color:#fff;position:fixed;right:15px;top:15px;cursor:pointer;" onclick="fullScreen(this);">全屏</div>
<div style="color:#fff;position:fixed;right:15px;top:15px;cursor:pointer;display: none;" onclick="exitScreen(this);">退出全屏</div>
<input type="hidden" id="data1" value="{$userx}">
<input type="hidden" id="data2" value="{$usery}">
<input type="hidden" id="data3" value="{$volunteery}">
<script src="__JS__/echats.js"></script>
<script type="text/javascript" src="__JS__/gScrollNumber.js"></script>
<script>
    window.type = 1;
    function clickType(obj,num){
        window.type = num;
        $(obj).addClass('paixing').siblings().removeClass('paixing');
        checkInfo();
    }
    function numbers(value,value1,value2) {
        window.scrollNumber0 = new gScrollNumber(".scroll-number-0", {
            width: 20, // 每个数字元素的宽
            color: "#ffffff", // 数字元素的字体颜色
            fontSize: 30, // 数字元素的字体大小
            autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
            //background: "#0f6ebd",
        });
        window.scrollNumber1 = new gScrollNumber(".scroll-number-1", {
            width: 20, // 每个数字元素的宽
            color: "#ffffff", // 数字元素的字体颜色
            fontSize: 30, // 数字元素的字体大小
            autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
            //background: "#0f6ebd",
        });
        window.scrollNumber2 = new gScrollNumber(".scroll-number-2", {
            width: 20, // 每个数字元素的宽
            color: "#38efff", // 数字元素的字体颜色
            fontSize: 30, // 数字元素的字体大小
            autoSizeContainerWidth: true,
            //background: "#0f6ebd",
        });
        scrollNumber0.run(value);
        scrollNumber1.run(value1);
        scrollNumber2.run(value2);
    }
</script>
<script>
    function fullScreen(obj){
        $(obj).next().show();
        $(obj).hide();
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

        //typeof rfs != "undefined" && rfs
        if (rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject !== "undefined") {
            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function exitScreen(obj){
        $(obj).prev().show();
        $(obj).hide();

        var el = document;
        var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;

        //typeof cfs != "undefined" && cfs
        if (cfs) {
            cfs.call(el);
        }
        else if (typeof window.ActiveXObject !== "undefined") {
            //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function newTab(url,tit){
        if(top.layui.index){
            top.layui.index.openTabsPage(url,tit)
        }else{
            window.open(url)
        }
    }
    function check(val) {
        if (val < 10) {
            return ("0" + val);
        }else {
            return (val);
        }
    }
    function displayTime() {
        //获取div元素
        var timeDiv=document.getElementById("timeDiv");
        //获取系统当前的年、月、日、小时、分钟、毫秒
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minutes = date.getMinutes();
        var second = date.getSeconds();
        var timestr = year + "年" + month + "月" + day + "日  " + check(hour)
            + ":" + check(minutes) + ":" + check(second);
        //将系统时间设置到div元素中
        timeDiv.innerHTML = timestr;
    }
    function get_round(wish1,wish2,wish3){
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            color:[
                '#ff6200','#ff9f00','#0566e8'
            ],
            legend: {
                bottom: 0,
                left: 'center',
                data: ['未审核('+wish1+')', '未认领('+wish2+')', '已认领('+wish3+')']
            },
            series: [
                {
                    name: '微心愿',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [

                    ]
                },
                {
                    name: '微心愿',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#fff',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#fff',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    data: [
                        {value: wish1, name: '未审核('+wish1+')'},
                        {value: wish2, name: '未认领('+wish2+')'},
                        {value: wish3, name: '已认领('+wish3+')'}
                    ]
                }
            ]
        };

        window.myChart3 = echarts.init(document.getElementById('chartmain'));
        //使用制定的配置项和数据显示图表
        myChart3.setOption(option,true);
    }
    $(function(){
        window.setInterval("displayTime()",1000);
        window.setInterval(checkInfo,5000);
        checkInfo();
        get_round('{$wish[0]}','{$wish[1]}','{$wish[2]}');
        get_site();
        get_site2();
        scrollNumber0.run('{$num}');


    });
    function checkInfo(){
        //window.location.reload();
        $('.site'+type).addClass('paixing').siblings().removeClass('paixing');

        $('#site').attr('src','/admin/test/site1/type/'+type);
        if(type==3){
            window.type=1;
        }else{
            window.type++;
        }

        $.post("{:url('test/check_num')}",{},function(res){
            console.info(JSON.stringify(res));
            numbers(1,1,1);
            numbers(res.data1,res.data2,res.data);
            $('#numList').html(html);
            $('.count0').html(res.count[0]);
            $('.count1').html(res.count[1]);
            $('.count2').html(res.count[2]);
            $('.count3').html(res.count[3]);
            $('.count4').html(res.count[4]);
            $('.count5').html(res.count[5]);
            $('.count6').html(res.count[6]);
            $('.count7').html(res.count[7]);

            element.init();
            element.progress('demo0','10');
            element.progress('demo1','10');
            element.progress('demo2','10');
            element.progress('demo3','10');
            element.progress('demo4','10');
            element.progress('demo5','10');

        },'json');
        $.post("{:url('test/check_info')}",{},function(res){
            console.info(JSON.stringify(res));
            $('#data1').val(res.userx);

            var data2 = $('#data2').val();
            // if(data2!=res.usery) {
            myChart1.clear();
            //  }
            $('#data2').val(res.usery);
            get_site();

            var data3 = $('#data3').val();
            //  if(data3!=res.volunteery) {
            myChart2.clear();
            //  }

            myChart3.clear();
            $('#data3').val(res.volunteery);
            get_site2();

            get_round(res.wish[0],res.wish[1],res.wish[2]);
        },'json');
    }
    function get_site(){
        var data = $('#data1').val().split(',');
        var data1 = $('#data2').val().split(',');
        var option = {
            color:['#19649a'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#0490cf'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '用户统计图',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: data1,
                    smooth: true
                }
            ]
        };
        window.myChart1 = echarts.init(document.getElementById('chartmain1'));
        //使用制定的配置项和数据显示图表
        myChart1.setOption(option,true);
    }
    function get_site2(){
        var data = $('#data1').val().split(',');
        var data1 = $('#data3').val().split(',');
        var option = {
            color:['#19649a'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#0490cf'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data:data,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '用户统计图',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: data1,
                    smooth: true
                }
            ]
        };
        window.myChart2 = echarts.init(document.getElementById('chartmain2'));
        //使用制定的配置项和数据显示图表
        myChart2.setOption(option,true);
    }
</script>
{/block}
